<template>
  <div class="app-container">
    <el-card>
      <el-form inline :model="searchForm" size="small">
        <el-form-item label="文章标题：">
          <el-input v-model="searchForm.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="发布账号：">
          <el-select v-model="searchForm.memberId" clearable>
            <el-option v-for="item in adminList" :key="item.id" :label="item.officialAuthnName" :value="item.id" />
          </el-select>
        </el-form-item>
         <el-form-item label="查询时间：" prop="beginTime">
          <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
            placeholder="选择开始日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker style="width: 200px" v-model="searchForm.endTime" align="right" type="date"
            placeholder="选择结束日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.publishStatus" placeholder="请选择状态" clearable size="small">
            <el-option label="全部" value=""></el-option>
            <el-option label="未发布" value="0"></el-option>
            <el-option label="已发布" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="resetList()">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="searchList()">查询</el-button>
        </el-form-item>
      </el-form>
      <div style="margin-bottom: 10px">
        <el-button @click="addVideo" icon="el-icon-plus" type="primary" size="mini">添加视频</el-button>
        <el-button icon="el-icon-delete" @click="batchDelete()" size="mini">批量删除</el-button>
      </div>
      <el-table :data="tableData.data" border size="mini" @selection-change="selectTableList">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" align="center" label="序号"></el-table-column>
        <el-table-column prop="title" align="center" label="文章标题"></el-table-column>
        <el-table-column prop="nickname" align="center" label="发布账号"></el-table-column>
        <el-table-column align="center" prop="visitCount" label="阅读量" />

        <el-table-column prop="likeCount" align="center" label="点赞"></el-table-column>
        <el-table-column prop="collectCount" align="center" label="收藏"></el-table-column>

        <el-table-column align="center" label="评论">
          <template slot-scope="scope">
            <router-link v-if="scope.row.commentStatus != 0" :to="{ path: `/content/talk?id=${scope.row.id}` }">
              <span style="cursor: pointer; color: #3a8ee6">{{
                scope.row.commentCount
                }}</span>
            </router-link>
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="发布状态">
          <template slot-scope="scope">
            <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.publishStatus"
              @change="changeStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="operator" label="创建人" />

        <el-table-column align="center" prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.publishStatus == 1" type="text" @click="editVideo(scope.row)"
              size="mini">编辑</el-button>
            <el-button :disabled="scope.row.publishStatus == 0" @click="seeVideo(scope.row)" type="text" size="mini">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageRight">
        <el-pagination background @size-change="handleSizeChange" :total="tableData.total"
          @current-change="handleCurrentChange" :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" />
      </div>
    </el-card>
    <detail ref="detailRef"></detail>
  </div>
</template>

<script>
import {
  getArticleList,
  getArticleInfo,
  deleteArticleBatch,
  getLinkAccountlist,
  editArticleStatus,
} from "@/api/article";
import detail from '../hotVideo/components/detail.vue'
export default {
  components: { detail },
  data() {
    return {
      searchForm: {
        title: "",
        pageNum: 1,
        pageSize: 10,
        memberId: "",
        type: 3,
        startTime: "",
        publishStatus: "",
      },
      tableData: {
        data: [],
        total: 0,
      },
      dialogVideoVisible: false,
      detailInfo: {},
      selectList: [],
      adminList: [],
      searchTime: [],
    };
  },
  async created() {
    await this.getAccountlist();
    await this.getList();
  },
  methods: {
    changeStatus(row) {
      editArticleStatus({
        articleIdList: [row.id],
        videoIdList: [row.videoId],
        publishStatus: row.publishStatus,
      }).then((res) => {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.getList();
      });
    },
    getAccountlist() {
      getLinkAccountlist().then((res) => {
        this.adminList = res.data;
      });
    },
    editVideo(v) {
      this.$router.push({
        path: "/shortVideo/add",
        query: {
          id: v.id,
        },
      });
    },
    batchDelete() {
      if (this.selectList.length === 0) {
        return this.$message.warning("请选择要删除的数据");
      } else {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          deleteArticleBatch(this.selectList.join(",")).then((res) => {
            this.$message.success("删除成功");
            this.getList();
          });
        });
      }
    },
    selectTableList(v) {
      this.selectList = v.map((v) => v.id);
    },

    async seeVideo(v) {
      let obj = Object.assign({}, v, {vid: v.videoId});
      this.$refs.detailRef.openlog(obj)
    },
    handleCancel() {
      this.dialogVideoVisible = false;
      this.$refs.vueRef.pause(); //暂停
    },
    addVideo() {
      this.$router.push({
        path: "/shortVideo/add",
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    searchList() {
      this.searchForm.pageNum = 1;
      this.$authDate(this.searchForm.beginTime, this.searchForm.endTime, v => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          // console.log(this.searchForm);
          this.getList();
        }
      });
    },
    resetList() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        type: 3,
        title: "",
        status: "",
        startTime: "",
        endTime: "",
        publishStatus: "",
      };
      this.searchTime = [];
      this.getList();
    },
    getList() {
      getArticleList(this.searchForm).then((res) => {
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.total;
      });
    },
  },
};
</script>

<style lang="scss">
/deep/ .el-dialog__body {
  padding: 0 20px 20rpx !important;
}
</style>
